import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './style.scss'


class Index extends Component {
  // 默认props
  // static defaultProps = {
  //   type: 'row'
  // }
  // 检测props 类型 必传
  // static propTypes = {
  //   type: PropTypes.string,
  //   list: PropTypes.array.isRequired
  // }
  toDetail = (v) => {
    const { history } = this.props
  
    history.push({ pathname: '/detail', state: v  })
  }
  render() {
    const { list, type } = this.props
    return (
      <div className="list">
        <div className={type}>
          {
            list.length > 0 && list.map(v => {
              return (
                <dl key={v.id} onClick={ () => this.toDetail(v) }>
                  <dt>
                    <img src={v.url} alt="" onClick={ this.openModal  }/>
                  </dt>
                  <dd>
                    <h4>{v.title}</h4>
                    <p>{v.desc}</p>
                    <small style={{ color: 'red' }}>￥：{v.price}</small>
                  </dd>
                </dl>
              )
            })
          }
        </div>
      </div>
    )
  }
  
}

// 等价于 上面的 写法 
Index.propTypes = {
  type: PropTypes.string,
  list: PropTypes.array.isRequired
};

Index.defaultProps = {
  type: 'row'
}

export default Index;
